<template>
  <div class="filter-group">
    <label class="filter-label">{{ label }}:</label>
    <div class="filter-tags">
      <button
        v-for="item in items"
        :key="item[dataKey]"
        @click="updateModel(item[dataKey])"
        :class="{ active: modelValue === item[dataKey] }"
      >
        {{ item[nameKey] }}
      </button>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  label: String,
  items: Array, // 维度数据列表
  modelValue: [Number, String], // 当前选中的ID (对应 filters.categoryId 等)
  dataKey: { type: String, default: 'id' }, // 维度数据的ID字段名
  nameKey: { type: String, default: 'name' }, // 维度数据的名称字段名
})

const emit = defineEmits(['update:modelValue'])

// 更新父组件的筛选状态
const updateModel = (value) => {
  // 如果点击的是当前选中的项，则取消选择 (可选逻辑)
  // if (props.modelValue === value) {
  //   emit('update:modelValue', null);
  // } else {
  emit('update:modelValue', value)
  // }
}
</script>

<style scoped>
.filter-group {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.filter-label {
  font-weight: bold;
  margin-right: 15px;
  color: #333;
}
.filter-tags button {
  background: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px 15px;
  margin-right: 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.filter-tags button.active {
  background-color: #e53935; /* 红色激活 */
  color: white;
  border-color: #e53935;
}
</style>
